<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点属性操作</title>
    <style>
        #box{
            width: 500px;
            height: 300px;
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
        .border{
            border: 2px solid orange;
        }
    </style>
</head>
<body>

    <!-- className 节点属性 -->
    <div id="box" class="red">我是盒子</div>
    <button id="btn">单击盒子变色</button>
    <script>
        //1.查
        var box=document.querySelector('#box');
      var btn=  document.querySelector('#btn');

      //2.事件
      btn.onclick=function(){
        // alert('45555')
        //换类名
        box.className='blue';
        box.className='blue border'
        box.className='red blue border'
      }
    </script>

    <!-- forName 节点属性 -->
    <p>
        <label for="user" >用户名</label>
        <input type="text" id="user">
         
       </p>
       <p>
        <label for="pwd">密码</label>
        <input type="password" id="pwd">
         
       </p>
    
       <script>
      var labels=  document.querySelectorAll('label');
       labels[0].htmlFor='pwd';
       labels[1].htmlFor='user'
    
       </script>
</body>
</html>